<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="EdieLei" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <title>测试</title>
    <style>
        #photo{ width:200px; height:200px; margin:auto; margin-top:100px; background:#0cc; position: relative;}
        #photo img{ position: absolute;}

    </style>
</head>
<body>
    <input type="file" accept="image/*" captrue = 'camera' id="img">
    <div id="photo">
    </div>

<script src="jquery-2.2.0.js"></script>
<script>
    $(function () {
        $('#img').change(function() {
            var file = this.files[0];
//            创建读取文件方法
            var r = new FileReader();
            r.readAsDataURL(file);
//            当文件载入时创建缩略图
            $(r).load(function() {
                $('#photo').html('<img id="img2" src="' + this.result + '" alt="" />');
//                设置缩略图的高度或宽度撑满盒子
                $('#img2').load(function(){
                    if (parseFloat($('#img2').css('width'))>parseFloat($('#img2').css('height'))) {
                        var img_wid=$('#photo').css('width');
                        $('#img2').css('width',img_wid);
                    }else{
                        var img_hei=$('#photo').css('height');
                        $('#img2').css('height',img_hei);
                    }
//                    缩略图在盒子中居中
                    var top=(parseFloat($('#photo').css('height'))-parseFloat($('#img2').css('height')))/2+'px';
                    var left=(parseFloat($('#photo').css('width'))-parseFloat($('#img2').css('width')))/2+'px';
                    $('#img2').css('top',top);
                    $('#img2').css('left',left);
                })
            })
        })

    })
</script>
</body>
</html>